<!--
 * @Author: delin66
 * @Date: 2025-02-28 20:38:56
 * @LastEditors: delin66
 * @LastEditTime: 2025-03-07 14:46:50
 * @Descripttion:
-->
<template>
<div class="investment-container">
  <!-- 宣传片和园区公告的上半部分 -->
  <div class="top-section">
    <div class="video-section">
      <div class="section-header">
        <div class="title">园区宣传片</div>
      </div>
      <div class="video-content">
        <video src="https://ly.guilinsx.com:9090/2024科技园宣传片V9压缩.m4v" class="video" muted autoplay controls></video>
      </div>
    </div>

    <div class="announcement-section">
      <div class="section-header">
        <div class="title">园区公告</div>
        <div class="more" @click="moreAnnouncement">更多>></div>
      </div>
      <div class="announcement-content">
        <div class="announcement-list">
          <div class="column" v-for="(column, index) in announcementColumns" :key="index">
            <div
                class="item"
                v-for="item in column"
                :key="item.id"
                @click="toAnnouncementDetail(item.id)"
            >
              <div class="line">
                <div class="dot"></div>
                <span class="title ellipsis">
                  {{ item.title }}
                </span>
              </div>
              <span class="create-time">{{ item.createTime?.split(' ')[0] ?? '-' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 下半部分三个板块 -->
  <div class="bottom-section">
    <div class="section-box">
      <div class="section-header">
        <div class="title">园区招商</div>
      </div>
      <div class="section-content">
        <div class="notice-list">
          <ul>
            <li v-for="item in noticeList" :key="item.id" @click="toDynamicDetail(item.id)">
              <span class="title ellipsis">
                {{ item.title }}
              </span>
              <span class="create-time">{{ item.createTime?.split(' ')[0] ?? '-' }}</span>
            </li>
          </ul>
          <el-empty v-if="total === 0" description="暂无招商信息" />
        </div>
      </div>
    </div>

    <div class="section-box">
      <div class="section-header">
        <div class="title">政策文件</div>
      </div>
      <div class="section-content">
        <div class="file-list">
          <ul>
            <li v-for="item in policyFiles" :key="item.id" @click="downloadFile(item.filepath)">
              <span class="title ellipsis">
                {{ formatFileName(item.filename) }}
              </span>
              <span class="create-time">{{ item.createTime?.split(' ')[0] ?? '-' }}</span>
            </li>
          </ul>
          <el-empty v-if="policyFiles.length === 0" description="暂无政策文件" />
        </div>
      </div>
    </div>

    <div class="section-box">
      <div class="section-header">
        <div class="title">友情链接</div>
      </div>
      <div class="section-content">
        <div class="links-content">
          <ul>
            <li>
              <a href="https://www.gxjssc.cn" target="_blank">广西科技成果转化平台</a>
            </li>
            <li>
              <a href="https://www.guet.edu.cn/kjy/main.htm" target="_blank">高校科技园主页</a>
            </li>
            <li>
              <a href="https://www.guet.edu.cn/" target="_blank">桂林电子科技大学</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { getAnnouncementList } from '@/api/park';
import { getFileList } from '@/api/file';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useDownload } from '@/hooks/useDownload';

const router = useRouter();
const { download } = useDownload();

const total = ref(0);
const current = ref<number>(1);
// 获取招商信息列表
const noticeList = ref();
// 获取园区公告列表
const announcementList = ref();
// 获取政策文件列表
const policyFiles = ref([]);

// 跳转招商详情
function toDynamicDetail(id: string | number) {
  const { href } = router.resolve({
    name: 'noticeDetail',
    query: {
      id,
    },
  });
  window.open(href, '_blank');
}

// 跳转公告详情
function toAnnouncementDetail(id: string | number) {
  const { href } = router.resolve({
    name: 'noticeDetail',
    query: {
      id,
    },
  });
  window.open(href, '_blank');
}

// 更多公告
function moreAnnouncement() {
  router.push({
    name: 'noticeAnnouncement',
  });
}

// 下载文件
function downloadFile(filepath: string) {
  download(filepath);
}

// 格式化文件名
function formatFileName(filename: string) {
  const extension = filename.substring(filename.lastIndexOf('.') + 1);
  const originName = filename.substring(0, filename.lastIndexOf('_'));
  return `${originName}.${extension}`;
}

// 获取招商信息
function getNoticeList() {
  const query = {
    type: 3,
    current: 1,
    size: 8,
    status: 1,
  };
  getAnnouncementList(query).then((res: any) => {
    if (res.code === 200) {
      noticeList.value = res.data?.records;
      total.value = res.data?.total;
    }
  });
}

// 获取园区公告
function getAnnouncementListData() {
  const query = {
    type: 0,
    current: 1,
    size: 8,
    status: 1,
  };
  getAnnouncementList(query).then((res: any) => {
    if (res.code === 200) {
      announcementList.value = res.data?.records;
    }
  });
}

// 获取政策文件
function getPolicyFiles() {
  getFileList({
    current: 1,
    size: 5,
    fileName: null,
  }).then((res: any) => {
    if (res.code === 200) {
      policyFiles.value = res.data?.records || [];
    }
  });
}

// 计算两列公告
const announcementColumns = computed(() => {
  if (!announcementList.value) return [];
  const columns = [[], []];
  announcementList.value.forEach((item, index) => {
    columns[index % 2].push(item);
  });
  return columns;
});

onMounted(() => {
  getNoticeList();
  getAnnouncementListData();
  getPolicyFiles();
});
</script>

<style scoped lang="scss">
.investment-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

// 上半部分：宣传片和园区公告
.top-section {
  margin-top: 30px;
  margin-bottom: 40px;
  display: flex;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  min-height: 480px;
  position: relative;
  z-index: 1;

  .video-section {
    width: 65%;
    display: flex;
    flex-direction: column;

    .video-content {
      flex: 1;
      padding: 25px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

      .video {
        width: 100%;
        height: 100%;
        max-height: 400px;
        object-fit: cover;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .announcement-section {
    width: 35%;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #0370c2;
    background: #ffffff;

    .announcement-content {
      flex: 1;
      padding: 20px;
      overflow: hidden;

      .announcement-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 100%;
        max-height: 380px;
        overflow-y: auto;


        .column {
          .item {
            margin-bottom: 8px;
            padding: 8px 12px;
            border-radius: 4px;
            background: #f8f9fa;
            border-left: 3px solid #0370c2;
            transition: all 0.3s ease;
            margin-right: 8px;

            &:hover {
              background: #e3f2fd;
              transform: translateX(3px);
            }

            .line {
              display: flex;
              align-items: center;
              margin-bottom: 4px;

              .dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #0370c2;
                margin-right: 8px;
                flex-shrink: 0;
              }

              .title {
                font-size: 14px;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
                font-weight: 500;
                color: #333;
                &:hover {
                  color: #0370c2;
                }
              }
            }

            .create-time {
              font-size: 12px;
              color: #666;
              margin-left: 14px;
            }
          }
        }
      }
    }
  }
}

// 下半部分：三个板块
.bottom-section {
  margin-top: 40px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
  position: relative;
  z-index: 0;
  clear: both;

  .section-box {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 380px;
    min-width: 0;
    position: relative;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .section-content {
      flex: 1;
      padding: 20px;
      overflow: hidden;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

      .notice-list, .file-list {
        height: 100%;
        overflow-y: auto;

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            position: relative;
            padding: 10px 12px 10px 20px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-radius: 4px;
            background: #ffffff;
            border-left: 3px solid #0370c2;
            min-height: 40px;
            transition: all 0.3s ease;
            margin-right: 8px;

            &:hover {
              background: #e3f2fd;
              transform: translateX(3px);
            }

            &::before {
              content: '';
              position: absolute;
              width: 5px;
              height: 5px;
              background-color: #0370c2;
              top: 16px;
              left: 8px;
              border-radius: 50%;
            }

            .title {
              font-size: 14px;
              cursor: pointer;
              flex: 1;
              margin-right: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 1.5;
              font-weight: 500;
              color: #333;
              &:hover {
                color: #0370c2;
              }
            }

            .create-time {
              font-size: 12px;
              color: #666;
              white-space: nowrap;
              flex-shrink: 0;
            }
          }
        }
      }

      .links-content {
        height: 100%;
        overflow-y: auto;

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            margin-bottom: 15px;
            padding: 12px 15px;
            border-radius: 4px;
            background: #ffffff;
            border-left: 3px solid #0370c2;
            transition: all 0.3s ease;
            margin-right: 8px;

            &:hover {
              background: #e3f2fd;
              transform: translateX(3px);
            }

            a {
              color: #333;
              text-decoration: none;
              font-size: 14px;
              font-weight: 500;
              display: block;
              padding: 4px 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:hover {
                color: #0370c2;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .bottom-section {
    grid-template-columns: repeat(2, 1fr);

    .section-box:last-child {
      grid-column: 1 / -1;
    }
  }
}

@media (max-width: 768px) {
  .top-section {
    flex-direction: column;
    height: auto;

    .video-section, .announcement-section {
      width: 100%;
    }

    .announcement-section {
      border-left: none;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  .bottom-section {
    grid-template-columns: 1fr;
    gap: 15px;

    .section-box {
      height: 300px;
    }
  }
}

// 通用标题样式
.section-header {
  display: flex;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background-color: #0370c2;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 96% 85%, 96% 100%, 4% 100%, 4% 85%, 0 85%);

  .title {
    margin: 0 auto;
    font-weight: bolder;
  }

  .more {
    margin-right: 40px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    z-index: 99;
    &:hover {
      opacity: 0.8;
    }
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
